<!--**
  *@info loading组件
  *@author: thinkmix
* *-->
<template>
  <transition appear name="fadeIn">
    <div class="m-loading f-flex mid center" :class="{fix: fix}">
      <div class="box f-tac" :class="boxClass">
        <svg
          t="1584082775227"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4226"
          :width="size"
          :height="size"
        >
          <path
            d="M980.752 313.697c-25.789-60.972-62.702-115.725-109.713-162.736-47.012-47.011-101.764-83.924-162.736-109.713C645.161 14.542 578.106 1 509 1c-2.242 0-4.48 0.015-6.715 0.043-16.567 0.211-29.826 13.812-29.615 30.38 0.209 16.438 13.599 29.618 29.99 29.618l0.39-0.002c1.98-0.026 3.963-0.039 5.95-0.039 61.033 0 120.224 11.947 175.93 35.508 53.82 22.764 102.162 55.359 143.683 96.879s74.115 89.862 96.88 143.683C949.054 392.776 961 451.967 961 513c0 16.568 13.432 30 30 30s30-13.432 30-30c0-69.106-13.541-136.162-40.248-199.303z"
            p-id="4227"
            :fill="loadingcolor"
          />
        </svg>
        <div class="text" :style="textStyle" v-html="text"></div>
      </div>
      <div class="f-mask" v-if="fix"></div>
    </div>
  </transition>
</template>
<script>

export default {
  name: 'loading',
  props: {
    fix: {
      default: false,
      type: Boolean
    },
    textcolor: {
      default: '#fff',
      type: String
    },
    loadingcolor: {
      default: '#fff',
      type: String
    },
    text: {
      default: '',
      type: String
    },
    size: {
      default: 36,
      type: Number
    },
  },
  data () {
    return {

    }
  },
  computed: {
    boxClass () {
      if (!this.fix) {
        return 'f-flex mid'
      }
    },
    textStyle () {
      let otherStyle = '';

      if (this.fix) {
        otherStyle = 'margin-top: 5px;'
      } else {
        otherStyle = 'margin-left: 5px;'
      }

      return `color: ${this.textcolor};${otherStyle}`
    }
  },
  created () {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.m-loading {
  > .box {
    position: relative;
    > svg {
      transform-origin: center;
      animation: loading-rotate 0.9s linear infinite;
    }
    > .text {
    }
  }
}
.m-loading.fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    transform: none;
  }
}
.fadeIn-enter-active {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
  backface-visibility: visible;
}
</style>
